<template>
  <div>
    <el-form style="padding: 10px" :model="editData">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="规则名称">
            <el-input v-model="editData.ruleName" placeholder="规则名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="网站地址">
            <el-input v-model="editData.rootSource" placeholder="网站地址"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="传参类型">
            <yu-select select dictCode="rootType" v-model:value="editData.rootType" placeholder="POST/GET"></yu-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="规则类型">
            <yu-select select dictCode="ruleType" v-model:value="editData.ruleType" placeholder="规则类型"></yu-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="搜索地址">
            <el-input v-model="editData.rootSearch" placeholder="搜索地址"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="ruleSetEdit">
      <div>
        <el-button-group class="ml-4">
          <el-button @click="handleZip">合并</el-button>
          <el-button @click="handleFormat">展开</el-button>
          <el-button @click="bookCheck">规则校验</el-button>
          <el-button @click="ruleMarkDilag">规则说明</el-button>
        </el-button-group>
      </div>
      <b-row>
        <b-col span="12">
          <yu-ace-editor :data="editorStr" lang="json" v-model:value="editorStr" @handleCells="handleCells" @handleFormat="handleFormat"></yu-ace-editor>
        </b-col>
        <b-col span="12">
          <div class="pl-15 sub_mit">
            <el-button-group class="ml-4">
              <el-button type="primary" @click="initBookRule">初始化规则</el-button>
              <el-button type="primary" @click="saveBookRuleData">保存</el-button>
            </el-button-group>
          </div>
        </b-col>
      </b-row>
    </div>
    <rule-check :ruleCheck="ruleCheck"></rule-check>
    <rule-remark :ruleMark="ruleMark"></rule-remark>
  </div>
</template>

<script setup>
  import RuleCheck from './RuleCheck.vue';
  import RuleRemark from './RuleRemark.vue';

  import { ref, getCurrentInstance, toRef, onBeforeMount, toRefs } from 'vue';
  const { proxy } = getCurrentInstance();
  const emit = defineEmits(['children']);
  const editorStr = ref('{}');

  const props = defineProps({
    isShow: { type: Boolean, default: false },
    editData: { type: Object, default: {} },
  });
  const jsonStr = ref();

  const editData = toRef(props, 'editData');
  const ruleSetJson = toRef(props, 'ruleSetJson');
  const ruleCheck = ref({ show: false });
  const ruleMark = ref({ show: false });
  onBeforeMount(() => {
    //更新数据
    updateJSON();
  });
  const updateJSON = () => {
    debugger;
    if (JSON.stringify(editData.value) === '{}') {
      initBookRule();
    } else {
      //json格式规则格式话
      editorStr.value = JSON.stringify(JSON.parse(editData.value.ruleSet), null, 2);
    }
  };

  const handleZip = () => {
    editorStr.value = JSON.stringify(JSON.parse(editorStr.value), null, 0);
  };
  const handleFormat = () => {
    editorStr.value = JSON.stringify(JSON.parse(editorStr.value), null, 2);
  };
  const initBookRule = async () => {
    let rs = await proxy.$api.rule.initSysRule();
    editorStr.value = JSON.stringify(rs, null, 2);
  };
  const bookCheck = async () => {
    ruleCheck.value.show = true;
  };
  const ruleMarkDilag = async () => {
    ruleMark.value.show = true;
  };
  const saveBookRuleData = async () => {
    let ruleSet = JSON.stringify(JSON.parse(editorStr.value), null, 0);
    editData.value.ruleSet = ruleSet;
    proxy.$api.rule.editSysRule(editData.value).then(res => {
      if (res.code != -1) {
        proxy.$message({
          type: 'success',
          message: res.msg,
        });
        ruleSetEdit.value.isShow = false;
        emit('children', { data: res });
      } else {
        // 关闭对话框
        proxy.$message({
          type: 'success',
          message: res,
        });
      }
    });
  };
</script>
<style lang="scss" scoped></style>
